<template>
  <div style=" height: 100%;">
    <div class="mapcontain" style="height: 100%;">
      <div id="container"></div>
      <div id="driving_way" v-show="status == 1">
        <select>
          <option value="0">推荐方案</option>
          <option value="1">最少时间</option>
          <option value="2">最少换乘</option>
          <option value="3">最少步行</option>
          <option value="4">不乘地铁</option>
          <option value="5">优先地铁</option>
        </select>
        <button id="search">查询</button>
        <p id="result"></p>
      </div>
    </div>
    <div id="result1" v-show="status == 0">
      PB终端步行导航
      <button id="shows" @click="traffic()" class="btn btn-outline-primary">
        显示/隐藏路况
      </button>
      <button id="shows" @click="back()" class="btn btn-outline-primary">
        返回酒店
      </button>
    </div>
    <div id="result1" v-show="status == 1">
      PB终端公交导航
      <button id="shows" @click="traffic()" class="btn btn-outline-primary">
        显示/隐藏路况
      </button>
      <button id="shows" @click="back()" class="btn btn-outline-primary">
        返回酒店
      </button>
    </div>
    <div id="result1" v-show="status == 2">
      PB终端驾车导航
      <button id="shows" @click="traffic()" class="btn btn-outline-primary">
        显示/隐藏路况
      </button>
      <button id="shows" @click="back()" class="btn btn-outline-primary">
        返回酒店
      </button>
    </div>
    <div id="result1" v-show="status == 3">
      PB终端骑行导航
      <button id="shows" @click="traffic()" class="btn btn-outline-primary">
        显示/隐藏路况
      </button>
      <button id="shows" @click="back()" class="btn btn-outline-primary">
        返回酒店
      </button>
    </div>
  </div>
</template>

<script>
import { guideApi } from "../api/map";

export default {
  name: "mapGuide",
  data() {
    return {
      userId: 1,//来自-------sessionStorage获取
      status: 0,//根据status选择导航方式，0步行，1公交，2驾车,3骑行
      userXY: { lng: 0.00, lat: 0.00 },//创建地图需要的经纬度，通过-----传来的userId-----查询用户得到
      hotelXY: { lng: 0.00, lat: 0.00 },//酒店经纬度,通过-----酒店组件----传来的酒店名查取酒店表获得
      walking: { starts: "", ends: "" },//步行导航的起始终止地址，起始地址名查自用户，终止地址名来自------酒店组件-----传递

      map: {}, //地图对象
      click: 0, //是否展示路况
      params: {}, //参数请求集
      id:0,//酒店id

      //前端测试
      // userId: 1, //组件传递
      // status: 0,
      // userXY: { lng: 104.14402278576799, lat: 30.634690652292694 }, //用户经纬度
      // hotelXY: { lng: 104.061355, lat: 30.665365 }, //酒店经纬度
      // walking: {
      //   starts: "7天酒店(火车东站地铁站店)",
      //   ends: "7天酒店(成都温江伊藤光华公园地铁站店)", //组件传递
      // },
    };
  },

  methods: {
    //步行导航,根据始终地址名查取--测试成功
    walkingGuide() {
      // console.log("步行导航...");
      var self = this;
      var map = new BMapGL.Map("container");
      map.enableScrollWheelZoom();
      map.centerAndZoom(new BMapGL.Point(self.userXY.lng, self.userXY.lat), 11);
      self.map = map;

      var walking = new BMapGL.WalkingRoute(map, {
        renderOptions: { map: map, autoViewport: true },
      });
      walking.search(self.walking.starts, self.walking.ends);
    },
    //公交导航,根据始终经纬度查取--测试成功
    busGuide() {
      var self = this;
      // 百度地图API功能
      var map = new BMapGL.Map("container");
      map.centerAndZoom(new BMapGL.Point(self.userXY.lng, self.userXY.lat), 14);
      self.map = map;

      //公交车路线查询
      var start = new BMapGL.Point(self.userXY.lng, self.userXY.lat);
      var end = new BMapGL.Point(self.hotelXY.lng, self.hotelXY.lat);
      var routePolicy = [
        BMAP_TRANSIT_POLICY_RECOMMEND,
        BMAP_TRANSIT_POLICY_LEAST_TIME,
        BMAP_TRANSIT_POLICY_LEAST_TRANSFER,
        BMAP_TRANSIT_POLICY_LEAST_WALKING,
        BMAP_TRANSIT_POLICY_AVOID_SUBWAYS,
        BMAP_TRANSIT_POLICY_FIRST_SUBWAYS,
      ];
      var transit = new BMapGL.TransitRoute(map, {
        renderOptions: { map: map, panel: "result" },
        policy: 0,
      });
      $("#search").click(function () {
        map.clearOverlays();
        var i = $("#driving_way select").val();
        search(start, end, routePolicy[i]);
        function search(start, end, route) {
          transit.setPolicy(route);
          transit.search(start, end);
        }
      });
    },
    //自驾车导航,含耗时计算与展示,根据始终经纬度查取--测试成功
    carGuide() {
      var self = this;
      //新建地图
      var map = new BMapGL.Map("container");
      var point = new BMapGL.Point(self.userXY.lng, self.userXY.lat);
      map.centerAndZoom(point, 11);
      map.enableScrollWheelZoom(true);
      self.map = map;

      //路线规划
      var driving = new BMapGL.DrivingRoute(map, {
        renderOptions: {
          map: map,
          autoViewport: true,
        },
      });

      //   坐标设置
      var start = new BMapGL.Point(self.userXY.lng, self.userXY.lat);
      var end = new BMapGL.Point(self.hotelXY.lng, self.hotelXY.lat);

      //路线展示
      driving.search(start, end, {});

      //耗时计算与展示
      var output = "驾车行驶需要";
      var searchComplete = function (results) {
        if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
          return;
        }
        var plan = results.getPlan(0);
        output += plan.getDuration(true) + "\n"; //获取时间
        output += "总路程为：";
        output += plan.getDistance(true) + "\n"; //获取距离
      };
      var transit = new BMapGL.DrivingRoute(map, {
        renderOptions: { map: map },
        onSearchComplete: searchComplete,
        onPolylinesSet: function () {
          setTimeout(function () {
            alert(output);
          }, "1000");
        },
      });
      transit.search(start, end);
    },
    //骑行导航,根据始终经纬度查取--测试成功
    ridingGuide() {
      var self = this;
      var map = new BMapGL.Map("container");
      map.centerAndZoom(new BMapGL.Point(self.userXY.lng, self.userXY.lat), 14);
      self.map = map;

      var riding = new BMapGL.RidingRoute(map, {
        renderOptions: {
          map: map,
          autoViewport: true,
        },
      });
      var start = new BMapGL.Point(self.userXY.lng, self.userXY.lat);
      var end = new BMapGL.Point(self.hotelXY.lng, self.hotelXY.lat);
      riding.search(start, end);
    },
    //初始化参数，组件传递的userId、hotelName、status，后二测试接收成功
    getParams() {
      /**
       * this.userId = session获取
       * this.ends = 组件传递
       */

      // this.userId = sessionStorage.getItem("userId");
      this.status = this.$route.params.status;
      this.walking.ends = this.$route.params.ends;
      this.id = this.$route.params.id;

      //请求参数封装
      this.params.userId = this.userId;
      this.params.ends = this.walking.ends;
    },
    //根据status的值选择执行不同的导航方案
    guide(status) {
      // console.log(status);//参数获取成功
      switch (status) {
        case 0:
          this.walkingGuide();
          break;
        case 1:
          this.busGuide();
          break;
        case 2:
          this.carGuide();
          break;
        case 3:
          this.ridingGuide();
          break;
        default:
          break;
      }
    },
    //路况是否展示
    traffic() {
      // console.log(this.click);
      if (this.click % 2 == 0) {
        this.map.setTrafficOn();
        this.click++;
      } else {
        this.map.setTrafficOff();
        this.click++;
      }
    },
    //返回酒店组件
    back() {
      this.$router.push({name:"hotel_lhj",params:{hotel_id:this.id}})
    },
  },

  mounted() {
    /*this.status = 0;
    this.walkingGuide();
    this.status = 1;
    this.busGuide();
    this.status = 2;
    this.carGuide();
    this.status = 3;
    this.ridingGuide();*/

    //初始化参数
    this.getParams();

    //向后端请求数据
    guideApi(this.params).then((res) => {
      console.log(res);
      //赋值
      this.walking.starts = res.map.starts;
      this.userXY.lng = res.map.userLng;
      this.userXY.lat = res.map.userLat;
      this.hotelXY.lng = res.map.hotelLng;
      this.hotelXY.lat = res.map.hotelLat;
      //test
      // console.log(this.userXY);
      // console.log(this.hotelXY);
      //执行导航方法
      this.guide(this.status);
    });
  },
};
</script>

<style>
#container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#driving_way {
  position: fixed;
  top: 10px;
  right: 20px;
  width: 270px;
  height: 450px;
  background: #fff;
  box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
  border-radius: 7px;
  z-index: 99;
  padding: 10px;
}

.mapcontain {
  width: 100%;
  height: 100%;
}

#result {
  height: 400px;
  overflow-y: auto;
}

#result1 {
  position: fixed;
  top: 10px;
  left: 20px;
  width: 400px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #fff;
  box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
  border-radius: 7px;
  z-index: 99;
}

#shows {
  font-size: 10px;
  margin-left: 10px;
}
</style>
